<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>前端开发的一些实践规范 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="规则,实践,">
  

  <meta name="description" content="一、HTML实践  使用标准的HTML5简化的定义的方式 定义文档类型  &amp;lt;!DOCTYPE html&amp;gt; 定义页面的编码 &amp;lt;meata charset=&amp;quot;UTF-8&amp;quot;&amp;gt; 样式和页脚的引用，不需要写type类型，如link script   停止使用不标准的标签和属性，如mqrquee 不推荐在HTML标签中添加样式属性，如img标签中添加宽高 不要使用@">
<meta name="keywords" content="规则,实践">
<meta property="og:type" content="article">
<meta property="og:title" content="前端开发的一些实践规范">
<meta property="og:url" content="http://blog.poetries.top/2016/11/23/前端开发一些实践/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="一、HTML实践  使用标准的HTML5简化的定义的方式 定义文档类型  &amp;lt;!DOCTYPE html&amp;gt; 定义页面的编码 &amp;lt;meata charset=&amp;quot;UTF-8&amp;quot;&amp;gt; 样式和页脚的引用，不需要写type类型，如link script   停止使用不标准的标签和属性，如mqrquee 不推荐在HTML标签中添加样式属性，如img标签中添加宽高 不要使用@">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2020-08-15T04:25:31.942Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端开发的一些实践规范">
<meta name="twitter:description" content="一、HTML实践  使用标准的HTML5简化的定义的方式 定义文档类型  &amp;lt;!DOCTYPE html&amp;gt; 定义页面的编码 &amp;lt;meata charset=&amp;quot;UTF-8&amp;quot;&amp;gt; 样式和页脚的引用，不需要写type类型，如link script   停止使用不标准的标签和属性，如mqrquee 不推荐在HTML标签中添加样式属性，如img标签中添加宽高 不要使用@">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#一、HTML实践"><span class="toc-text">一、HTML实践</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#二、CSS实践"><span class="toc-text">二、CSS实践</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#三、JavaScript实践"><span class="toc-text">三、JavaScript实践</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#四、附录"><span class="toc-text">四、附录</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#附录一-DIV命名规范"><span class="toc-text">附录一 DIV命名规范</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#附录二-CSS精灵"><span class="toc-text">附录二 CSS精灵</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#附录三-一些tips解决方案"><span class="toc-text">附录三 一些tips解决方案</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#页面优化实践"><span class="toc-text">页面优化实践</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#写DIV-CSS-的一些常识"><span class="toc-text">写DIV+CSS 的一些常识</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#常用代码片段"><span class="toc-text">常用代码片段</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#一些总结"><span class="toc-text">一些总结</span></a></li></ol></li></ol></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-前端开发一些实践" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">前端开发的一些实践规范</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2016.11.23</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Front-End/">Front-End</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 4.2k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 16分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <h3 id="一、HTML实践"><a href="#一、HTML实践" class="headerlink" title="一、HTML实践"></a>一、HTML实践</h3><hr>
<ul>
<li>使用标准的<code>HTML5</code>简化的定义的方式<ul>
<li>定义文档类型  <code>&lt;!DOCTYPE html&gt;</code></li>
<li>定义页面的编码 <code>&lt;meata charset=&quot;UTF-8&quot;&gt;</code></li>
<li>样式和页脚的引用，不需要写<code>type</code>类型，如<code>link</code> <code>script</code></li>
</ul>
</li>
<li>停止使用不标准的标签和属性，如<code>mqrquee</code></li>
<li>不推荐在<code>HTML</code>标签中添加样式属性，如<code>img</code>标签中添加宽高</li>
<li>不要使用<code>@import</code>，此方式最大的缺点是引用<code>css</code>文件不能同时并行下载<a id="more"></a></li>
<li>增加<code>JavaScript</code>禁用的提示信息，最常用的方式是使用<code>&lt;noscript&gt;</code></li>
<li>添加必要的<code>meta</code>标签</li>
<li>使用频率较高的语义化标签<ul>
<li><code>p</code> <code>ul</code> <code>dl</code> <code>p</code> <code>em</code> <code>strong</code> <code>table</code> <code>site</code> <code>blockquote</code></li>
<li><code>nav</code> <code>header</code> <code>footer</code> <code>article</code> <code>section</code> <code>aside</code> <code>hground</code></li>
</ul>
</li>
<li>样式和结构的分离：把<code>HTML</code>中用于表达外观的部分从HTML中删除，并用css实现。如<code>&lt;span&gt;|&lt;/span&gt;</code>中的<code>|</code> 用css的伪类实现即可</li>
<li>如果图片作为页面内容的一部分，应该使用<code>img</code>标签，如果图片仅仅是装饰作用，应该使用背景图片方式</li>
<li>提高表单易用性的手段<ul>
<li>使用<code>label</code>标签，并设置<code>label</code>标签的<code>for</code>属性</li>
<li>给输入控件设置合理的<code>placehoder</code></li>
<li>如有必要，给输入控件设置<code>tab</code>顺序，<code>tabindex</code>用来设置输入控件的切换顺序   <code>&lt;input type=&quot;text&quot; tabindex=&quot;2&quot;&gt;</code></li>
<li>使用<code>HTML5</code>中引入的表单控件<code>url email date search</code> </li>
<li>精简<code>HTML</code>代码</li>
<li>删除多余的容器</li>
<li>装饰性的元素使用<code>css</code>实现</li>
<li>避免使用<code>table</code>布局</li>
</ul>
</li>
</ul>
<h3 id="二、CSS实践"><a href="#二、CSS实践" class="headerlink" title="二、CSS实践"></a>二、CSS实践</h3><hr>
<ul>
<li>推荐的<code>css</code>类的命名规则和元素的<code>id</code>命名规则相似，只是组成类名的关键字的连接符为中划线<code>-</code> <code>.reder-content-title</code><ul>
<li>为了避免<code>class</code>命名的重复，命名时取父元素的<code>class</code>作为前缀</li>
</ul>
</li>
<li>使用<code>css reset</code>统一浏览器的显示效果</li>
<li>给<code>css</code>样式定义排序，最佳是按类型分组排序<ul>
<li>显示与浮动、定位、尺寸、边框相关属性、字体样式、背景、其他样式</li>
</ul>
</li>
<li>合理利用<code>css</code>的权重，提高代码的重用性<ul>
<li><code>css</code>样式中尽量不要使用<code>ID</code>选择器，最佳实践尽可能使用较低权重的选择器作为基础样式</li>
<li>减少自选择器的层级</li>
<li>使用组合的<code>css</code>选择器</li>
<li><code>em</code> <code>px</code> <code>%</code><ul>
<li><code>w3c</code>把尺寸单位分为相对长度单位和绝对长度单位两种。</li>
<li>相对长度单位又分为字体相对单位和视窗相对单位<ul>
<li>字体相对单位包括：<code>em</code> <code>ex</code> <code>ch</code> <code>rem</code></li>
<li>视窗相对单位包括：<code>vw</code>  <code>vh</code> <code>vmin</code> <code>vmax</code></li>
<li>使用最广泛的是<code>em</code> <code>px</code> 百分比</li>
</ul>
</li>
<li><code>em</code>计算是相对自身元素的字体尺寸的，<code>rem</code>相对于根元素的字体大小计算， 百分比是相对于父元素的尺寸的</li>
<li>如何设置元素的尺寸和字体大小最佳实践<ul>
<li>尽量设置相对尺寸（局部的尺寸要尽量使用相对尺寸，即局部自适应）</li>
<li>只有在可预知元素尺寸的情况下才使用绝对尺寸</li>
<li>使用<code>em</code>设置字体大小</li>
</ul>
</li>
</ul>
</li>
<li><code>css</code>选择器定义最佳实践<ul>
<li>避免使用通配符</li>
<li>避免使用标签选择器及单个属性选择器作为关键选择器</li>
<li>不要在<code>id</code>选择器前使用标签名</li>
<li>尽量不要使在选择符中定义过多的层级，最好不要超过三层</li>
</ul>
</li>
</ul>
</li>
<li><code>css</code>相关图片处理<ul>
<li>不要设置图片尺寸</li>
<li>使用<code>css</code>雪碧图技术</li>
<li>减少<code>css</code>代码量<ul>
<li>定义简洁的<code>css</code>规则</li>
<li>合并相关的<code>css</code>规则</li>
<li>定义简洁的属性值合并相同的定义</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="三、JavaScript实践"><a href="#三、JavaScript实践" class="headerlink" title="三、JavaScript实践"></a>三、JavaScript实践</h3><hr>
<ul>
<li>避免定义全局变量或函数<ul>
<li>使用<code>var</code></li>
<li>使用<code>JavaScript</code>的严格模式<code>use strict;</code></li>
</ul>
</li>
<li>使用简化的编码方式<ul>
<li>对象创建<code>pserson={age:22,name:&quot;poetries&quot;}</code></li>
<li>数组创建<code>list=[12,23,55]</code></li>
</ul>
</li>
<li>使用<code>===</code>和<code>!==</code>而不是<code>==</code>和<code>!=</code></li>
<li>避免使用<code>with</code>语句和<code>eval()</code></li>
<li>使用更严格的编码格式<ul>
<li>使用严格模式遵循：<ul>
<li>不要在全局中启用严格模式</li>
<li>在已有代码中谨慎使用严格模式</li>
</ul>
</li>
<li>严格模式主要对不合理的地方做了改进<ul>
<li>禁用<code>width</code>关键字</li>
<li>防止意外的全局变量</li>
<li>函数中的<code>this</code>不在默认指向全局</li>
<li>防止函数参数重命名</li>
<li>更安全的使用<code>eval()</code></li>
</ul>
</li>
<li>事件处理和业务逻辑相分离</li>
<li>配置数据和代码逻辑相分离</li>
<li>逻辑与结构相似相分离<ul>
<li>从<code>JavaScript</code>逻辑中分离<code>css</code>样式</li>
<li>从<code>JavaScript</code>中分离<code>HTML</code>结构</li>
</ul>
</li>
<li><code>JavaScript</code>模块化的开发，提高代码的可维护性<ul>
<li><code>JavaScript</code>的两种模块化规范 <code>ComonJS</code> <code>AMD</code></li>
<li>两者的主要区别在加载模块的方式上</li>
<li><code>ComonJS</code> 以同步的方式加载，使用<code>require()</code>方法来加载模块</li>
<li><code>AMD</code>以异步的方式加载模块</li>
</ul>
</li>
</ul>
</li>
<li>合理使用<code>Ajax</code>技术，适合的使用场景有<ul>
<li>前端会根据用户的需求动态取得后端数据，然后更新网页界面</li>
<li>期望通过不刷新页面取得任何资源或页面</li>
<li>动态进行用户输入的认证</li>
</ul>
</li>
</ul>
<h3 id="四、附录"><a href="#四、附录" class="headerlink" title="四、附录"></a>四、附录</h3><hr>
<h4 id="附录一-DIV命名规范"><a href="#附录一-DIV命名规范" class="headerlink" title="附录一 DIV命名规范"></a>附录一 DIV命名规范</h4><hr>
<ul>
<li><p>企业<code>DIV</code>使用频率高的命名方法</p>
</li>
<li><p><strong>网页内容类</strong></p>
<ul>
<li><p>标题: <code>title</code></p>
<ul>
<li>摘要: <code>summary</code></li>
<li>箭头： <code>arrow</code></li>
<li>商标： <code>label</code></li>
<li>网站标志： <code>logo</code></li>
<li>转角/圆角：<code>corner</code></li>
<li>横幅广告： <code>banner</code></li>
<li>子菜单： <code>subMenu</code></li>
<li>搜索： <code>search</code></li>
<li>搜索框： <code>searchBox</code></li>
<li>登录： <code>login</code></li>
<li>登录条：<code>loginbar</code></li>
<li>工具条： <code>toolbar</code></li>
<li>下拉： <code>drop</code></li>
<li>标签页： <code>tab</code></li>
<li>当前的： <code>current</code></li>
<li>列表： <code>list</code></li>
<li>滚动： <code>scroll</code></li>
<li>服务： <code>service</code></li>
<li>提示信息： <code>msg</code></li>
<li>热点：<code>hot</code></li>
<li>新闻： <code>news</code></li>
<li>小技巧： <code>tips</code></li>
<li>下载： <code>download</code></li>
<li>栏目标题： <code>title</code></li>
<li>热点： <code>hot</code></li>
<li>加入：<code>joinus</code></li>
<li>注册： <code>regsiter</code></li>
<li>指南： <code>guide</code></li>
<li>友情链接： <code>friendlink</code></li>
<li>状态： <code>status</code></li>
<li>版权： <code>copyright</code></li>
<li>按钮： <code>btn</code></li>
<li>合作伙伴： <code>partner</code></li>
<li>投票： <code>vote</code></li>
<li>左右中：<code>left</code>  <code>right</code>  <code>center</code></li>
</ul>
<hr>
</li>
<li>注释的写法: <code>/* Footer */</code> 内容区<code>/* End Footer */</code></li>
</ul>
</li>
<li><p><strong>id的命名:</strong></p>
<ul>
<li><p>页面结构</p>
<ul>
<li>容器: <code>container</code></li>
<li>页头：<code>header</code></li>
<li>内容：<code>content</code>/<code>container</code></li>
<li>页面主体：<code>main</code></li>
<li>页尾：<code>footer</code></li>
<li>导航：<code>nav</code></li>
<li>侧栏：<code>sidebar</code></li>
<li>栏目：<code>column</code></li>
<li>页面外围控制整体布局宽度：<code>wrapper</code></li>
<li>左右中：<code>left</code> <code>right</code> <code>center</code></li>
</ul>
</li>
</ul>
<hr>
<ul>
<li><p>导航</p>
<ul>
<li>导航：<code>nav</code></li>
<li>主导航：<code>mainbav</code></li>
<li>子导航：<code>subnav</code></li>
<li>顶导航：<code>topnav</code></li>
<li>边导航：<code>sidebar</code></li>
<li>左导航：<code>leftsidebar</code></li>
<li>右导航：<code>rightsidebar</code></li>
<li>菜单：<code>menu</code></li>
<li>子菜单：<code>submenu</code></li>
<li>标题: <code>title</code></li>
<li>摘要: <code>summary</code></li>
</ul>
</li>
</ul>
<hr>
<ul>
<li><p>功能</p>
<ul>
<li>标志：<code>logo</code></li>
<li>广告：<code>banner</code></li>
<li>登陆：<code>login</code></li>
<li>登录条：<code>loginbar</code></li>
<li>注册：<code>regsiter</code></li>
<li>搜索：<code>search</code></li>
<li>功能区：<code>shop</code></li>
<li>标题：<code>title</code></li>
<li>加入：<code>joinus</code></li>
<li>状态：<code>status</code></li>
<li>按钮：<code>btn</code></li>
<li>滚动：<code>scroll</code></li>
<li>标签页：<code>tab</code></li>
<li>文章列表：<code>list</code></li>
<li>提示信息：<code>msg</code></li>
<li>当前的:<code>current</code></li>
<li>小技巧：<code>tips</code></li>
<li>图标: <code>icon</code></li>
<li>注释：<code>note</code></li>
<li>指南：<code>guild</code></li>
<li>服务：<code>service</code></li>
<li>热点：<code>hot</code></li>
<li>新闻：<code>news</code></li>
<li>下载：<code>download</code></li>
<li>投票：<code>vote</code></li>
<li>合作伙伴：<code>partner</code></li>
<li>友情链接：<code>link</code></li>
<li>版权：<code>copyright</code></li>
</ul>
</li>
</ul>
<hr>
<ul>
<li><p><strong><code>class</code>的命名:</strong></p>
<ul>
<li><p>颜色:使用颜色的名称或者16进制代码,如</p>
<ul>
<li><code>.red { color: red; }</code></li>
<li><code>.f60 { color: #f60; }</code></li>
<li><code>.ff8600 { color: #ff8600; }</code></li>
</ul>
</li>
<li><p>字体大小,直接使用”font+字体大小”作为名称,如</p>
<ul>
<li><code>.font12px { font-size: 12px; }</code></li>
<li><code>.font9px {font-size: 9pt; }</code></li>
</ul>
</li>
<li><p>对齐样式,使用对齐目标的英文名称,如</p>
<ul>
<li><code>.left { float:left; }</code></li>
<li><code>.bottom { float:bottom; }</code></li>
</ul>
</li>
<li><p>标题栏样式,使用”类别+功能”的方式命名,如</p>
<ul>
<li><code>.barnews { }</code></li>
<li><code>.barproduct { }</code></li>
</ul>
</li>
</ul>
<hr>
<ul>
<li><p><strong>注意事项::</strong></p>
<ul>
<li>一律小写;</li>
<li>尽量用英文;</li>
<li>不加中杠和下划线;</li>
<li>尽量不缩写，除非一看就明白的单词.</li>
</ul>
</li>
</ul>
<hr>
</li>
</ul>
</li>
<li><p><strong>推荐的 <code>CSS</code> 书写顺序：</strong></p>
<ul>
<li><p>显示属性</p>
<ul>
<li><code>display</code></li>
<li><code>list-style</code></li>
<li><code>position</code></li>
<li><code>float</code></li>
<li><code>clear</code></li>
</ul>
</li>
<li><p>自身属性</p>
<ul>
<li><code>width</code></li>
<li><code>height</code></li>
<li><code>margin</code></li>
<li><code>padding</code></li>
<li><code>border</code></li>
<li><code>background</code></li>
</ul>
</li>
<li><p>文本属性</p>
<ul>
<li><code>color</code></li>
<li><code>font</code></li>
<li><code>text-decoration</code></li>
<li><code>text-align</code></li>
<li><code>vertical-align</code></li>
<li><code>white-space</code></li>
<li><code>other text</code></li>
<li><code>content</code>    </li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<h4 id="附录二-CSS精灵"><a href="#附录二-CSS精灵" class="headerlink" title="附录二 CSS精灵"></a>附录二 CSS精灵</h4><hr>
<ul>
<li>CSS精灵原理以及应用<ul>
<li><code>CSS</code>雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。<ul>
<li>该图片使用<code>CSS</code>   <code>background和background-position</code>属性渲染，这也就意味着你的标签变得更加复杂了，图片是在<code>CSS</code>中定义，而非<code>&lt;img&gt;</code>标签。</li>
</ul>
</li>
</ul>
</li>
<li>一个简单的例子：<ul>
<li>一张图片作出一个按钮的三个状态</li>
<li>一个链接用<code>CSS</code>做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，<code>a:link</code>，<code>a:hover</code>，<code>a:active</code> <code>&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;链接&lt;/a&gt;</code></li>
<li>加入右侧的图片为：<code>200px 65px</code>的三个按钮图拼合而成的图片<code>button.png</code>，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用<code>CSS</code>进行定义。</li>
</ul>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>:block; </span><br><span class="line">    <span class="attribute">width</span>:<span class="number">200px</span>; </span><br><span class="line">    <span class="attribute">height</span>:<span class="number">65px</span>; </span><br><span class="line">    <span class="attribute">line-height</span>:<span class="number">65px</span>; <span class="comment">/*定义状态*/</span></span><br><span class="line">    <span class="attribute">text-indent</span>:-<span class="number">2015px</span>; <span class="comment">/*隐藏文字*/</span></span><br><span class="line">    <span class="attribute">background-image</span>:<span class="built_in">url</span>(button.png); <span class="comment">/*定义背景图片*/</span></span><br><span class="line">    <span class="attribute">background-position</span>:<span class="number">0</span> <span class="number">0</span>;</span><br><span class="line">    <span class="comment">/*定义链接的普通状态，此时图像显示的是顶上的部分*/</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>:<span class="number">0</span> -<span class="number">66px</span>;</span><br><span class="line">    <span class="comment">/*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">    <span class="attribute">background-position</span>:<span class="number">0</span> -<span class="number">132px</span>;                      </span><br><span class="line">    <span class="comment">/*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>更多的<code>CSS</code>雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值<ul>
<li>如：<code>background:url(nav.png) -180px 24pxno-repeat</code>; 来达到更精确的定位</li>
</ul>
</li>
<li><strong>优点：</strong><ul>
<li>减少加载网页图片时对服务器的请求次数</li>
<li>可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。</li>
<li>提高页面的加载速度</li>
<li><code>sprite</code>技术的其中一个好处是图片的加载时间(在有许多 <code>sprite</code> 时，单张图片的加载时间)。由所需图片拼成的一张 <code>GIF</code>图片的尺寸会明显小于所有图片拼合前的大小。单张的 <code>GIF</code>只有相关的一个色表，而单独分割的每一张 <code>GIF</code> 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 <code>JPEG</code> 或者 <code>PNG</code> <code>sprite</code> 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。</li>
<li>减少鼠标滑过的一些<code>bug</code></li>
<li><code>IE6</code>不会主动预加载鼠标滑过即<code>a:hover</code>中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用<code>CSS</code>雪碧，由于一张图片即可，所以不会出现这种现象。</li>
</ul>
</li>
<li>不足：<ul>
<li><code>CSS</code>雪碧的最大问题是内存使用</li>
<li>影响浏览器的缩放功能</li>
<li>拼图维护比较麻烦</li>
<li>使<code>CSS</code>的编写变得困难</li>
<li><code>CSS</code> 雪碧调用的图片不能被打印</li>
<li>错误得使用 <code>Sprites</code> 影响可访问性</li>
</ul>
</li>
</ul>
<h4 id="附录三-一些tips解决方案"><a href="#附录三-一些tips解决方案" class="headerlink" title="附录三 一些tips解决方案"></a>附录三 一些tips解决方案</h4><hr>
<h5 id="页面优化实践"><a href="#页面优化实践" class="headerlink" title="页面优化实践"></a>页面优化实践</h5><hr>
<ul>
<li><p>从下面的几个方面可以进行页面的优化：</p>
<ul>
<li>减少请求数</li>
<li>图片合并</li>
<li><code>CSS</code>文件合并</li>
<li>减少内联样式</li>
<li>避免在 <code>CSS</code>中使用 <code>import</code></li>
<li>减少文件大小</li>
<li>选择适合的图片格式</li>
<li>图片压缩</li>
<li><code>CSS</code> 值缩写（<code>Shorthand Property</code>)</li>
<li>文件压缩</li>
<li>页面性能</li>
<li>调整文件加载顺序</li>
<li>减少标签数量</li>
<li>调整选择器长度</li>
<li>尽量使用<code>CSS</code> 制作显示表现</li>
<li>增强代码可读性与可维护性</li>
<li>规范化</li>
<li>语义化</li>
<li>模块化</li>
</ul>
</li>
</ul>
<h5 id="写DIV-CSS-的一些常识"><a href="#写DIV-CSS-的一些常识" class="headerlink" title="写DIV+CSS 的一些常识"></a>写DIV+CSS 的一些常识</h5><hr>
<ul>
<li><p>不要使用过小的图片做背景平铺</p>
<ul>
<li>这就是为何很多人都不用 <code>1px</code> 的原因，这才知晓。宽高 <code>1px</code> 的图片平铺出一个宽高 <code>200px</code> 的区域，需要 <code>200200=40, 000</code> 次，占用资源</li>
</ul>
</li>
<li><p>无边框</p>
<ul>
<li>推荐的写法是 <code>border:none</code>;，哈哈，我一直在用这个。 <code>border:0;</code> 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源</li>
</ul>
</li>
<li><p>慎用 通配符</p>
<ul>
<li>所谓通配符，就是将<code>CSS</code> 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。</li>
</ul>
</li>
<li><p><code>CSS</code>的十六进制颜色代码缩写</p>
<ul>
<li>习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。</li>
</ul>
</li>
<li><p>样式放头上，脚本放脚下。不内嵌，只外链</p>
</li>
<li><p>坚决不用 <code>CSS</code>表达式</p>
</li>
<li><p>使用 引用样式表，而不是通过<code>@import</code> 导入。</p>
</li>
<li><p>一般来说，<code>PNG</code>比 <code>GIF</code> 要小，小得多。再者，<code>GIF</code> 中有多少颜色是被浪费的，很值得优化。</p>
</li>
<li><p>千万不要在 <code>HTML</code>中缩放图片，一者不好看，二者占资源。</p>
</li>
<li><p>正文字体最好用偶数</p>
<ul>
<li><code>12px</code>、<code>14px</code>、<code>16px</code>，效果非常好。特例，<code>15px</code>。</li>
</ul>
</li>
<li><p><code>block</code>、<code>ul</code>、<code>ol</code>等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。</p>
</li>
<li><p>段落之间，至少要有一倍行距</p>
</li>
<li><p>强行指定某些元素的 <code>line-height</code>，正文 <code>1.6</code>倍于文字大小，标题<code>1.3</code>倍。</p>
</li>
<li><p>中文标点用全角</p>
<ul>
<li>英文夹杂在中文中，左右空格，半角。</li>
</ul>
</li>
<li><p>中文字体的粗体和斜体，远离较好</p>
</li>
<li><p><strong>[建议] HTML 标签的使用应该遵循标签的语义</strong></p>
<ul>
<li>下面是常见标签语义<ul>
<li><code>p</code> - 段落</li>
<li><code>h1,h2,h3,h4,h5,h6</code> - 层级标题</li>
<li><code>strong,em</code> - 强调</li>
<li><code>ins</code> - 插入</li>
<li><code>del</code> - 删除</li>
<li><code>abbr</code>- 缩写</li>
<li><code>code</code> - 代码标识</li>
<li><code>cite</code> - 引述来源作品的标题</li>
<li><code>q</code> - 引用</li>
<li><code>blockquote</code> - 一段或长篇引用</li>
<li><code>ul</code> - 无序列表</li>
<li><code>ol</code> - 有序列表</li>
<li><code>dl,dt,dd</code> - 定义列表</li>
</ul>
</li>
</ul>
</li>
</ul>
<h5 id="常用代码片段"><a href="#常用代码片段" class="headerlink" title="常用代码片段"></a>常用代码片段</h5><hr>
<ul>
<li>雅虎工程师提供的<code>CSS</code>初始化示例代码【仅供参考】<ul>
<li>可以在<code>html</code>头文件中直接引用，从而避免浏览器的不兼容带来的错误。</li>
</ul>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">body</span>,</span><br><span class="line"><span class="selector-tag">div</span>,</span><br><span class="line"><span class="selector-tag">dl</span>,</span><br><span class="line"><span class="selector-tag">dt</span>,</span><br><span class="line"><span class="selector-tag">dd</span>,</span><br><span class="line"><span class="selector-tag">ul</span>,</span><br><span class="line"><span class="selector-tag">ol</span>,</span><br><span class="line"><span class="selector-tag">li</span>,</span><br><span class="line"><span class="selector-tag">h1</span>,</span><br><span class="line"><span class="selector-tag">h2</span>,</span><br><span class="line"><span class="selector-tag">h3</span>,</span><br><span class="line"><span class="selector-tag">h4</span>,</span><br><span class="line"><span class="selector-tag">h5</span>,</span><br><span class="line"><span class="selector-tag">h6</span>,</span><br><span class="line"><span class="selector-tag">pre</span>,</span><br><span class="line"><span class="selector-tag">code</span>,</span><br><span class="line"><span class="selector-tag">form</span>,</span><br><span class="line"><span class="selector-tag">fieldset</span>,</span><br><span class="line"><span class="selector-tag">legend</span>,</span><br><span class="line"><span class="selector-tag">input</span>,</span><br><span class="line"><span class="selector-tag">button</span>,</span><br><span class="line"><span class="selector-tag">textarea</span>,</span><br><span class="line"><span class="selector-tag">p</span>,</span><br><span class="line"><span class="selector-tag">blockquote</span>,</span><br><span class="line"><span class="selector-tag">th</span>,</span><br><span class="line"><span class="selector-tag">td</span> &#123; </span><br><span class="line">    <span class="attribute">margin</span>:<span class="number">0</span>; <span class="attribute">padding</span>:<span class="number">0</span>; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>:<span class="number">#fff</span>; </span><br><span class="line">    <span class="attribute">color</span>:<span class="number">#555</span>; </span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">14px</span>; </span><br><span class="line">    <span class="attribute">font-family</span>: Verdana, Arial, Helvetica, sans-serif; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">td</span>,</span><br><span class="line"><span class="selector-tag">th</span>,</span><br><span class="line"><span class="selector-tag">caption</span> &#123; </span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">14px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">h1</span>, </span><br><span class="line"><span class="selector-tag">h2</span>, </span><br><span class="line"><span class="selector-tag">h3</span>, </span><br><span class="line"><span class="selector-tag">h4</span>, </span><br><span class="line"><span class="selector-tag">h5</span>, </span><br><span class="line"><span class="selector-tag">h6</span> &#123; </span><br><span class="line">    <span class="attribute">font-weight</span>:normal; </span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">100%</span>; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">address</span>, </span><br><span class="line"><span class="selector-tag">caption</span>,</span><br><span class="line"><span class="selector-tag">cite</span>, </span><br><span class="line"><span class="selector-tag">code</span>, </span><br><span class="line"><span class="selector-tag">dfn</span>, </span><br><span class="line"><span class="selector-tag">em</span>, </span><br><span class="line"><span class="selector-tag">strong</span>,</span><br><span class="line"><span class="selector-tag">th</span>, </span><br><span class="line"><span class="selector-tag">var</span> &#123; </span><br><span class="line">    <span class="attribute">font-style</span>:normal; </span><br><span class="line">    <span class="attribute">font-weight</span>:normal;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span> &#123; </span><br><span class="line">    <span class="attribute">color</span>:<span class="number">#555</span>; </span><br><span class="line">    <span class="attribute">text-decoration</span>:none; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123; </span><br><span class="line">    <span class="attribute">text-decoration</span>:underline; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>:none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ol</span>,<span class="selector-tag">ul</span>,<span class="selector-tag">li</span> &#123; </span><br><span class="line">    <span class="attribute">list-style</span>:none; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">input</span>, </span><br><span class="line"><span class="selector-tag">textarea</span>, </span><br><span class="line"><span class="selector-tag">select</span>, </span><br><span class="line"><span class="selector-tag">button</span> &#123; </span><br><span class="line">    <span class="attribute">font</span>:<span class="number">14px</span> Verdana,Helvetica,Arial,sans-serif; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">table</span> &#123; </span><br><span class="line">    <span class="attribute">border-collapse</span>:collapse; </span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">html</span> &#123;</span><br><span class="line">    <span class="attribute">overflow-y</span>: scroll;</span><br><span class="line">&#125; </span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">"."</span>; </span><br><span class="line">    <span class="attribute">display</span>: block; </span><br><span class="line">    <span class="attribute">height</span>:<span class="number">0</span>; </span><br><span class="line">    <span class="attribute">clear</span>:both; </span><br><span class="line">    <span class="attribute">visibility</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.clearfix</span> &#123; </span><br><span class="line">    *zoom:1; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><p>现代浏览器<code>cssreset</code>解决方案【推荐使用这个】</p>
<ul>
<li><a href="https://necolas.github.io/normalize.css/" target="_blank" rel="noopener">normalize.css</a></li>
</ul>
</li>
<li><p><code>mobile meta</code>标签</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">”viewport”</span> <span class="attr">content</span>=<span class="string">”width</span>=<span class="string">320,target-densitydpi</span>=<span class="string">dpi_value,initial-scale</span>=<span class="string">1,</span> <span class="attr">user-scalable</span>=<span class="string">no”/</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>表格不被撑开</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">table-layout</span>: <span class="selector-tag">fixed</span>; <span class="selector-tag">word-break</span>: <span class="selector-tag">break-all</span>;;<span class="selector-tag">border-collapse</span>: <span class="selector-tag">collapse</span></span><br></pre></td></tr></table></figure>
<ul>
<li>不设宽高居中</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">”abc”</span> <span class="attr">style</span>=<span class="string">”display:table;text-align:center;width:100%;height:100%;”</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">”background:#f00;</span> <span class="attr">display:table-cell</span>; <span class="attr">vertical-align:middle</span>;”&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">”button”</span> <span class="attr">value</span>=<span class="string">”item1″</span> /&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>透明度的兼容代码</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line">filter:alpha(opacity=50); /*1-100*/</span><br><span class="line"><span class="selector-tag">-moz-opacity</span><span class="selector-pseudo">:0.5</span>; <span class="comment">/*0-1.0*/</span></span><br><span class="line"><span class="selector-tag">-khtml-opacity</span><span class="selector-pseudo">:0.5</span>; <span class="comment">/*0-1.0*/</span></span><br><span class="line"><span class="selector-tag">opacity</span><span class="selector-pseudo">:0.5</span>; <span class="comment">/*0-1.0*/</span></span><br></pre></td></tr></table></figure>
<ul>
<li><p>文本溢出的几种处理方法</p>
</li>
<li><p>简单隐藏</p>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-class">.hide</span>&#123;<span class="attribute">overflow</span>:hidden&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>使用滚动条</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-class">.scroll</span>&#123;<span class="attribute">overflow</span>:scroll&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>简单裁切</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-class">.clip</span>&#123;</span><br><span class="line">	<span class="attribute">border</span>:<span class="number">1px</span> solid;</span><br><span class="line">	<span class="attribute">overflow</span>:hidden;<span class="comment">/*超出隐藏*/</span></span><br><span class="line">	<span class="attribute">white-space</span>:nowrap;<span class="comment">/*强制在一行显示*/</span></span><br><span class="line">	<span class="attribute">text-overflow</span>:clip;<span class="comment">/*裁切*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>超出部分省略号</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-class">.elli</span>&#123;</span><br><span class="line">	<span class="attribute">overflow</span>:hidden;</span><br><span class="line">	<span class="attribute">white-space</span>:nowrap;</span><br><span class="line">	<span class="attribute">text-overflow</span>:ellipsis;<span class="comment">/*使用省略号*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><p>清除浮动的几种方法</p>
<ul>
<li><p>方法一：<code>投机取巧法</code> – 不推荐</p>
<ul>
<li>直接一个放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强</li>
</ul>
</li>
<li><p>方法二：<code>overflow + zoom</code>方法  –不推荐<br> <code>.fix{overflow:hidden; zoom:1;}</code></p>
<ul>
<li>此方法优点在于代码简洁，涵盖所有浏览器</li>
</ul>
</li>
<li><p>方法三：<code>after + zoom</code>方法 -推荐–此方法可以说是综合起来最好的方法了</p>
<ul>
<li><code>clearfix</code>只应用在包含浮动子元素的父级元素上</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span>&#123;<span class="attribute">zoom</span>:<span class="number">1</span>;&#125;</span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span>&#123;</span><br><span class="line">     <span class="attribute">display</span>:block; </span><br><span class="line">     <span class="attribute">content</span>:<span class="string">'clear'</span>; </span><br><span class="line">     <span class="attribute">clear</span>:both;</span><br><span class="line">     <span class="attribute">line-height</span>:<span class="number">0</span>; </span><br><span class="line">     <span class="attribute">visibility</span>:hidden;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>方法四 在方法三的基础上的最优雅的做法【推荐】</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span>,</span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:before</span> &#123;<span class="comment">/*before 是为了防止浏览器顶部空白的崩溃*/</span>   </span><br><span class="line">     <span class="attribute">content</span>: <span class="string">" "</span>;   </span><br><span class="line">     <span class="attribute">display</span>: table;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span> &#123;    </span><br><span class="line">    <span class="attribute">clear</span>: both;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>清除浮动的原理是触发<code>BFC</code>，这里只有<code>clear:both</code>起清除浮动作用，其他的<code>line-height:0;  visibility:hidden;</code>都是为了隐藏生的内容需要的</p>
<ul>
<li>拓展阅读<ul>
<li><a href="http://www.jianshu.com/p/09bd5873bed4" target="_blank" rel="noopener">CSS中的浮动和清除浮动</a></li>
<li><a href="http://www.jianshu.com/p/e878122a92a3" target="_blank" rel="noopener">实用的60个CSS代码片段</a></li>
</ul>
</li>
</ul>
<h5 id="一些总结"><a href="#一些总结" class="headerlink" title="一些总结"></a>一些总结</h5><hr>
<ul>
<li><p>自动继承属性：</p>
<ul>
<li><code>color</code></li>
<li><code>font</code></li>
<li><code>text-align</code></li>
<li><code>list-style</code><br>…</li>
</ul>
</li>
<li><p>非继承属性：</p>
<ul>
<li><code>background</code></li>
<li><code>border</code></li>
<li><code>position</code><br>…</li>
</ul>
</li>
<li><p>具有破坏性的元素：</p>
<ul>
<li><code>float</code></li>
<li><code>display:none;</code></li>
<li><code>position:absoblute/fixed/sticky;</code></li>
</ul>
</li>
<li><p>具有包裹性的元素：</p>
<ul>
<li><p><code>display:inline-block/table-cell</code></p>
</li>
<li><p><code>position:absolute/fixed/sticky</code></p>
</li>
<li><p><code>overflow:hidden/scroll</code></p>
</li>
</ul>
</li>
<li><p>消除图片底部间隙的方法</p>
<ul>
<li><p>图片块状化-无基线对齐<br><code>img{display:block;}</code></p>
</li>
<li><p>图片底线对齐<br><code>img{vertical-align:bottom;}</code></p>
</li>
<li><p>行高足够小 - 基线位置上移<br><code>.box{line-height:0;}</code></p>
</li>
</ul>
</li>
<li><p>参考</p>
<ul>
<li><code>web</code>前端开发最佳实践</li>
</ul>
</li>
</ul>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2016/11/19/bootstrap-review/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2016/11/26/h5-api/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
